<template>
  <div style="padding: 2px">
    <el-table border v-show="isTable" :data="tableDatas">
      <el-table-column width="280" align="center" prop="key" label="key">
      </el-table-column>
      <!--      <el-table-column width="80" align="center" prop="key" label="操作">-->
      <!--        <template v-slot="scope">-->
      <!--          <el-button type="text" @click="copy(scope.row)">复制</el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column align="center" label="value">
        <template #default="scope">
          <span>{{ scope.row.value }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "tableKeyValue",
};
</script>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const tableDatas = ref();
const isTable = ref(false);

const props = defineProps({
  tableData: ref(),
});

const tableKeyToValue = async (data) => {
  let tableData = [];
  for (let k in data) {
    let tableJson = { key: k, value: data[k] };
    tableData.push(tableJson);
  }
  tableDatas.value = tableData;
  if (tableDatas.value.length > 0) {
    isTable.value = true;
  }
};

const initData = () => {
  tableKeyToValue(props.tableData);
};
let copy_report_data = "";
const copy = (row) => {
  copy_report_data = JSON.stringify(row);
  navigator.clipboard
    .writeText(copy_report_data)
    .then(() => {
      console.log("复制成功");
      ElMessage.success("复制成功");
    })
    .catch((error) => {
      console.error("复制失败", error);
      ElMessage.error("复制失败");
    });
};

initData();
</script>

<style scoped></style>
